<template>
    <div class="large-achPro">
        <div class="item-list" v-for="item in dataList">
            <div class="item-top">
                <span>{{item.name}}</span>
                <span class="item-num">{{item.val}}%</span>
            </div>
            <div class="item-bottom">
                <div class="item-pro" :class="item.isMax&&'item-pro-max'" :style="'width:'+item.val+'%'"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    dataList: any[] = [];
    mounted() {
        if (this.pageData.length > 0) {
            let maxIdx = 0;
            let max = 0;
            this.dataList = this.pageData.map((item, idx) => {
                if (item.val > max) {
                    max = item.val;
                    maxIdx = idx;
                }
                return {
                    name: item.achievementCategory,
                    val: item.percentage,
                };
            });
            this.dataList[maxIdx].isMax = true;
        }
    }
}
</script>
<style lang="scss">
.large-achPro {
    min-height: 20vh;
    .item-list {
        margin-top: 4px;
    }
    .item-top {
        font-size: 14px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .item-num {
        font-size: 16px;
        color: #ffffff;
        text-shadow: 0px 0px 4px #44bbff;
    }
    .item-bottom {
        width: 100%;
        height: 12px;
        border-radius: 14px;
        border: solid 1px rgba(255, 255, 255, 0.2);
        margin-top: 2px;
    }
    .item-pro {
        height: 100%;
        background: linear-gradient(270deg, #36c2f5 0%, #1850a1 100%);
        border-radius: 7px;
    }
    .item-pro-max {
        background: linear-gradient(270deg, #ff744c 0%, #a6482d 100%);
    }
}
</style>
